<template>
  <el-container class="root-container">
    <el-header id="header">
      <el-container class="header-container">
        <el-row type="flex" justify="center" align="middle" class="header-logo">
          <el-row>
            <a :href="homeUrl">
              <img v-if="ImgSrc" :src="ImgSrc" />
            </a>
          </el-row>
          <el-row class="logo_title">
            <span>能源区块链交易系统</span>
          </el-row>
        </el-row>
        <el-row class="nav">
          <el-menu
            :default-active="this.$route.path"
            router
            mode="horizontal"
            @select="handleSelect"
            background-color="#222C3C"
            active-text-color="#fff"
            text-color="#fff"
          >
            <template v-for="(item, index) in routerList">
              <el-menu-item
                v-if="
                  item.children && item.children.length > 0 && !item.meta.hidden &&
                  ( !item.meta.isAdmin ||
                    (item.meta.isAdmin === 2 && (userRole === 'consumer' || userRole === 'prosumer' )) ||
                    (item.meta.isAdmin === 1 && userRole === 'grid' )
                  )
                "
                :index="item.children[0].path"
                :key="index"
              >
                <i :class="item.meta.iconCls"></i>
                <span slot="title">{{ item.children[0].name }}</span>
              </el-menu-item>
            </template>
          </el-menu>
        </el-row>
        <el-main class="Navigation">
          <el-row type="flex" justify="end">
            <el-row type="flex" justify="end" class="operation">
              <!-- <el-badge
                :value="badge_inform"
                class="badge"
                size="small"
                :hidden="badge_inform <= 0"
                刘太阳是臭bug
              >
                <el-tooltip class="item" effect="dark" content="消息" placement="bottom">
                  <el-button type="text" icon="el-icon-message-solid"></el-button>
                </el-tooltip>
              </el-badge> -->
              <el-tooltip effect="dark" content="系统设置" placement="bottom">
                <el-popover placement="bottom" width="100" trigger="click" class="tip">
                  <el-row type="flex" justify="center">
                    <el-button type="text" @click="handleAccount">账号信息</el-button>
                  </el-row>

                  <el-divider class="divider" style="margin: 10px 0"></el-divider>
                  <el-row type="flex" justify="center">
                    <el-button type="text" @click="handleOrder">我的订单</el-button>
                  </el-row>
                  <el-divider class="divider"></el-divider>
                  <el-row type="flex" justify="center">
                    <el-button type="text" @click="logout">退出登录</el-button>
                  </el-row>
                  <el-button type="text" slot="reference" icon="el-icon-s-custom"></el-button>
                </el-popover>
              </el-tooltip>
            </el-row>
          </el-row>
        </el-main>
      </el-container>
    </el-header>
    <el-container class="body-container">
      <el-main class="con">
        <el-row class="site">
          <el-icon
            style="display: inline-block;vertical-align: top;margin-right: 3px;cursor: pointer;margin-right:10px;font-weight:bold;"
            class="el-icon-back"
            v-if="showBack"
            @click.native="$router.go(-1)"
          />
          <el-breadcrumb style="display: inline-block;" class="breadcrumb-container" separator=">">
            <el-breadcrumb-item v-for="item in levelList" :key="item.path" :to="item.path">
              <i class="fa fa-home fa-fw" v-if="item.meta.title"></i>
              {{ item.meta.title ? item.meta.title : item.name }}
            </el-breadcrumb-item>
          </el-breadcrumb>
        </el-row>

        <transition name="fade" mode="out-in">
          <!-- <keep-alive> -->
          <router-view />
          <!-- </keep-alive> -->
        </transition>
      </el-main>
      <el-dialog
        :title="dlgTitle"
        :visible.sync="visible"
        @closed="closeDlg"
        append-to-body
        width="30%"
      >
        <component :is="dlgCpt" @close="dlgVib = false" @locale="locale" />
      </el-dialog>
      <Loading />
    </el-container>
  </el-container>
</template>

<script lang='ts'>
import Constant from "@/lib/Constant";
import { Component, Vue, Watch } from "vue-property-decorator";
import Loading from "@/components/loading.vue";

@Component({
  components: {
    Loading
  }
})
export default class Home extends Vue {
  protected levelList: any = null;
  // for currDialog
  protected dlgCpt: any = null;
  protected dlgTitle: string = "";
  protected visible: boolean = false;
  protected ImgSrc: any = require("@/assets/logo.png");
  protected userRole: string = '';
  protected showBack: boolean = false;

  protected routerList: any = null;
  private activeIndex: number = 1;
  private form = {};

  private modules = [];

  // 账号信息
  protected handleAccount() {
    this.$router.push({ path: "/accountInformation" });
  }
  protected handleOrder() {
    this.$router.push({ path: "/myOrder" });
  }

  // 用户系统设置
  protected SystemSet() {
    // this.dlgCpt = SystemSetting;
    this.dlgTitle = "个人设置";
    this.visible = true;
  }

  // 退出登录
  private async logout(): Promise<void> {
    try {
      await this.$confirm("确认退出吗?", "提示");
      // localStorage.removeItem(Constant.userKeyInStorage);
      await this.$api.logout();
      localStorage.clear();
      this.$router.push({ path: "/login" });
      // this.$router.go(0);
    } catch (e) {
      console.error(e);
    }
  }

  private async created() {
    this.$nextTick(() => {
      const user = JSON.parse(localStorage.getItem("userInfo") as any);
      this.userRole = user && user.type;
    });
  }

  private toggleUserType() {
    this.$store.commit("toggleUserType");

    Vue.prototype.$toDefaultRoute();
  }
  @Watch("$route", { immediate: true })
  private onChange() {
    const list: any = this.$router.options.routes;
    this.routerList = list.map((item: any) => {
      return item;
    });
    const matched = this.$route.matched;
    if (matched && matched.length > 1) {
      if (matched[0].name !== matched[1].name) {
        this.showBack = true;
      } else {
        this.showBack = false;
      }
    }
    const matchedName: any = matched.filter((item) => item.name);
    // const first = matched[0];
    // if (
        // sdfjsldfjsd sdjfsjdflsfj
    //   first &&
    //   first.name.trim().toLocaleLowerCase() !== "Dashboard".toLocaleLowerCase()
    // ) {
    // matched = [{ path: "/trading", meta: { title: "主页" } }].concat(matched);
    // matched = matched;
    // }
    this.levelList = matchedName;
  }

  private mounted() {}
}
</script>

<style scoped lang="scss">
@import "../styles/vars";

.root-container {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: #f6f6f8;
  /deep/.el-header {
    background: #fff;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.12), 0 0 6px rgba(0, 0, 0, 0.04);
    // color: white;
    padding: 0;
    z-index: 2;
    .header-container {
      height: 100%;
      display: flex;
      align-items: center;
      background: #222c3c;
      // .top-nav {
      //   color: #333130;
      //   .el-menu-item {
      //     height: 60px;
      //     line-height: 54px;
      //   }
      // }
      .header-logo {
        margin: auto 2vw;
        overflow: hidden;
        width: auto;
        a {
          display: inline-block;
          overflow: hidden;
          width: 100%;
          height: 100%;
          img {
            width: auto;
            height: 100%;
            // max-width: 100%;
            max-height: 100%;
          }
        }
        .logo_title {
          color: #fff;
          text-align: center;
          width: 5vw;
        }
      }

      .nav {
        /deep/ .el-menu-item.is-active,
        .activated {
          background-image: linear-gradient(#019ffb, #0e59d6);
          border-bottom: none;
        }
        /deep/ .el-submenu__title.is-active,
        .activated {
          background-image: linear-gradient(#019ffb, #0e59d6);
          border-bottom: none;
        }
        /deep/ .el-menu.el-menu--horizontal {
          border-bottom: none;
        }
      }
      .systemNav {
        width: 50px;
        height: 54px;
        margin-left: -25px;
        display: flex;
        justify-content: center;
        align-items: center;
        cursor: pointer;
        img {
          width: 70%;
          display: block;
        }
      }
      .el-main {
        height: 100%;
        padding: 0 0 0 40px;
        .el-row {
          height: 100%;
          .el-row {
            display: flex;
            align-items: center;
            .tools {
              width: 14px;
              cursor: pointer;
            }
            .breadcrumb-container {
              display: inline-block;
              padding-left: 20px;
            }
          }
          .el-dropdown {
            cursor: pointer;
            color: #fff;
            .el-dropdown-link {
              display: flex;
              align-items: center;
            }
          }
        }
      }
      .Navigation {
        color: #fff;
        .operation {
          padding: 0 30px;
          font-size: 24px;
          .badge {
            margin: 0 20px;
          }
          .el-button {
            color: #fff;
            font-size: 24px;
          }
          /deep/ .el-popover {
            /deep/ .el-divider--horizontal {
              margin: 10px 0;
            }
          }
          .tip {
            color: #fff;
            /deep/ .el-divider {
              margin: 0px 0;
            }
          }
          // .iconStyle {
          //   color: #fff;
          //   font-size: 28px;
          // }
          // .admin {
          //   margin-right: 7%;
          //   width: 100%;
          //   img {
          //     width: 40px;
          //     height: 100%;
          //   }
          // }

          // .cut {
          //   display: inline-block;
          //   margin: 0 20px;
          // }
          // .el-fa-style {
          //   font-size: 20px;
          // }
          // .add-module {
          //   cursor: pointer;
          // }
        }
      }
    }
  }
  .body-container {
    overflow: auto;
    ::-webkit-scrollbar {
      display: none;
    }

    .el-aside {
      overflow-x: hidden;
      border-right: solid 1px #e6e6e6;
      background-color: rgb(52, 73, 94);
      .el-menu {
        border-right: none;
      }
      .el-menu-item.leavel2 {
        background-color: rgb(44, 63, 81) !important;
        color: #69767f !important;
      }
      .el-menu-item.leavel2:hover {
        color: #fff !important;
      }

      .el-menu-item.is-active {
        color: #fff !important;
        background-color: #1ba2ab !important;
      }
    }
    .sysCod {
      color: #a9a9aa;
      padding-left: 10px;
      position: fixed;
      bottom: 5%;
    }
    .con {
      /deep/ .el-table > .el-table__fixed-right {
        height: 100% !important; //设置高优先，以覆盖内联样式
      }
      /deep/ .el-table td {
        padding: 6px 0;
        height: 100% !important;
      }
      /deep/ .el-table th {
        background-color: rgb(244, 244, 245);
        padding: 7px 0 !important;
      }

      /deep/ .el-button--mini.is-circle {
        padding: 4px;
      }
      .searchBtn {
        /deep/ .el-form-item--small.el-form-item {
          margin-bottom: 0;
        }
      }
      /deep/ .deletedStyle {
        .fa {
          color: #f56c6c;
        }
      }
    }
  }
}
</style>

<style lang="scss">
h2,
h3 {
  margin: 0;
}
.el-container {
  height: 100%;
  .el-header {
    .el-main {
      .el-breadcrumb__item:last-child {
        .el-breadcrumb__inner {
          font-weight: bold !important;
        }
      }
      .el-breadcrumb__inner {
        color: white !important;
      }
    }
  }
  .site {
    margin-bottom: 1%;
  }
}

// .demo-table-expand {
//   font-size: 0;
//   label {
//     width: 90px;
//     color: #99a9bf;
//   }
//   .el-form-item {
//     margin-right: 0;
//     margin-bottom: 0;
//     width: 50%;
//   }
// }

.el-pagination {
  margin-top: 20px;
}

#app {
  .el-table {
    ::-webkit-scrollbar {
      // width: 5px;
      height: 12px;
      display: block;
    }
    ::-webkit-scrollbar-thumb {
      /*滚动条里面小方块*/
      // border-radius: 10px;
      // box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
      // background: #535353;

      border-radius: 10px;
      background-color: #909399;
      background-image: -webkit-linear-gradient(
        45deg,
        rgba(255, 255, 255, 0.2) 25%,
        transparent 25%,
        transparent 50%,
        rgba(255, 255, 255, 0.2) 50%,
        rgba(255, 255, 255, 0.2) 75%,
        transparent 75%,
        transparent
      );
    }
    ::-webkit-scrollbar-track {
      /*滚动条里面轨道*/
      // box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
      // border-radius: 10px;
      // background: #ededed;

      box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
      background: #ededed;
      border-radius: 10px;
    }
  }
}
</style>

<style>
input::-webkit-inner-spin-button,
input::-webkit-outer-spin-button {
  -webkit-appearance: none !important;
}

input[type="number"] {
  -moz-appearance: textfield; /* firefox */
}

textarea {
  font-family: Arial, Helvetica, sans-serif;
}
</style>

